
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>底部菜单</title>
<style>
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");
/* 第二步：css样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(135deg,  #1a9
,  #00001a);
}

.navigation {
    position: relative;
    width: 400px;
    height: 60px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
}

.navigation ul {
    display: flex;
    width: 350px;
    text-transform: capitalize;
}

.navigation ul li {
    position: relative;
    list-style: none;
    width: 70px;
    height: 60px;
    z-index: 2;
}

.navigation ul li a {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    text-align: center;
}

.navigation ul li a .icon {
    position: relative;
    display: block;
    line-height: 65px;
    font-size: 1.5em;
    transition: 0.5s;
    color: #222327;
}

/* 点击选中后图标往上移 */
.navigation ul li.active a .icon {
    transform: translateY(-30px);
    color: #2196f3;
}

.navigation ul li a .text {
    position: absolute;
    color: #fff;
    font-weight: 400;
    font-size: 0.75em;
    letter-spacing: 0.05em;
    transition: 0.5s;
    opacity: 0;
    transform: translateY(15px);
    background: #2196f3;
    padding: 2px 7px;
    border-radius: 12px;
}
/* 点击选中后菜单文字往上移，文字显示出来 */
.navigation ul li.active a .text {
    transform: translateY(-4px);
    opacity: 1;
}

.indicator {
    position: absolute;
    top: -35px;
    width: 70px;
    height: 70px;
    background: #fff;
    border-radius: 50%;
    z-index: 1;
    transition: 0.5s;
}

.indicator::before {
    content: "";
    position: absolute;
    top: 5px;
    left: -28px;
    width: 30px;
    height: 30px;
    background: transparent;
    border-radius: 50%;
    box-shadow: 15px 18px #fff
}

.indicator::after {
    content: "";
    position: absolute;
    top: 5px;
    right: -28px;
    width: 30px;
    height: 30px;
    background: transparent;
    border-radius: 50%;
    box-shadow: -15px 18px #fff
}

/* 移动半圈背景色配置 */
.navigation ul li:nth-child(1).active ~ .indicator {
    transform: translateX(calc(70px * 0));
}

.navigation ul li:nth-child(2).active ~ .indicator {
    transform: translateX(calc(70px * 1));
}

.navigation ul li:nth-child(3).active ~ .indicator {
    transform: translateX(calc(70px * 2));
}

.navigation ul li:nth-child(4).active ~ .indicator {
    transform: translateX(calc(70px * 3));
}
.navigation ul li:nth-child(5).active ~ .indicator {
    transform: translateX(calc(70px * 4));
}
</style>

</head>
<body>
<!-- 第一步：html菜单布局 -->
<div class="navigation">
<ul>
    <li class="list active">
        <a href="#">
            <span class="icon">
                <ion-icon name="home-outline"></ion-icon>
            </span>
            <span class="text">首页</span>
        </a>
    </li>
    <li class="list">
        <a href="#">
            <span class="icon">
                <ion-icon name="happy-outline"></ion-icon>
            </span>
            <span class="text">表情</span>
        </a>
    </li>
    <li class="list">
        <a href="#">
            <span class="icon">
                <ion-icon name="chatbubbles-outline"></ion-icon>
            </span>
            <span class="text">信息</span>
        </a>
    </li>
    <li class="list">
        <a href="#">
            <span class="icon">
                <ion-icon name="albums-outline"></ion-icon>
            </span>
            <span class="text">文件</span>
        </a>
    </li>
    <li class="list">
        <a href="#">
            <span class="icon">
                <ion-icon name="construct-outline"></ion-icon>
            </span>
            <span class="text">设置</span>
        </a>
    </li class="list">
    <!-- 选中后显示的半圆背景色 -->
    <div class="indicator"></div>
</ul>
</div>
<!-- 引入图标 -->
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
<script>
    // 第三步：给五个菜单加上点击事件，用于增加和移除active
    const list = document.querySelectorAll(".list");

    function activeLink() {
        list.forEach((item) =>
        item.classList.remove("active"));
        this.classList.add("active");
    }

    list.forEach((item) =>
    item.addEventListener("click", activeLink));
</script>
</body>
</html>